<template>
	<eui-background type="person" :imageUrl="personImg">
		<!--这是页面顶部插槽的内容-->
		<template v-slot:top>
			<view class="user-info">
				<view class="content flex padding-32 margin-top-12" :style="{paddingTop: statusBarHeight}">
					<view class="iconfont icon-shezhi font-size-48 color-fff" @click="openSetting"></view>
					<view class="flex">
						<view class="iconfont icon-xiaoxi font-size-48 color-fff" @click="openNews"></view>
						<!-- <view class="iconfont icon-saoyisao font-size-48 color-fff"></view> -->
					</view>
				</view>
				<view class="flex padding-32 margin-top-32" style="height: 144rpx;">
					<view style="position: relative;">
						<image :src="personImg" @error="setErrorImg" mode="scaleToFill"
							style="width: 144rpx;height: 144rpx;border-radius: 50%;" @click="openUserInfo"></image>
						<view class="user-sex flex"
							:class="userInfo.c_sex=='男'||userInfo.c_sex=='M'?'user-sex-M':'user-sex-W'">
							<view class="iconfont color-fff font-size-24"
								style="width: max-content;line-height: 1;height: min-content;"
								:class="userInfo.c_sex=='男'||userInfo.c_sex=='M'?'icon-nan':'icon-nv'"></view>
						</view>
					</view>
					<view class="flex margin-left-32 color-fff flex-direction-column justify-content-center"
						style="height: 144rpx;">
						<view class="font-size-48 font-weight-bold">{{userInfo.c_name}}</view>
						<view class="margin-top-12">{{userInfo.c_mobile_phone?userInfo.c_mobile_phone:userInfo.c_phone}}
						</view>
					</view>
				</view>
				<view class="padding-32 margin-top-40 color-fff font-size-24">越努力越幸运!</view>
				<view class="padding-32 margin-top-32 flex tag-warp" v-if="userInfo.c_store_name||userInfo.c_post">
					<eui-tag :text="userInfo.c_store_name" type="primary" shape="circle"
						:bgColor="themeBgColor"
						v-if="userInfo.c_store_name"></eui-tag>
					<eui-tag :text="userInfo.c_post" type="primary" shape="circle"
						:bgColor="themeBgColor"
						v-if="userInfo.c_post"></eui-tag>
				</view>
			</view>
		</template>
		<!--这是页面底部插槽的内容-->
		<template v-slot:bottom>
			<scroll-view scroll-y :style="{width:scrollWidth,height:scrollHeight}">
				<view class="tab-content">
					<view class="tab-content-li flex justify-content-space-between" @click="openWorkCard">
						<view class="flex">
							<image :src="baseUrl + '/rdsImgs/me_icon_gp.png'" mode="scaleToFill"
								style="width: 48rpx;height: 48rpx;" class="margin-left-32"></image>
							<view class="margin-left-24 font-size-32">我的工牌</view>
						</view>
						<view>
							<view class="iconfont icon-jiantouxiangyou font-size-32 color-888"
								style="font-weight: bold;"></view>
						</view>
					</view>
					<view class="tab-content-li flex justify-content-space-between margin-top-32"
						@click="openChangePassword">
						<view class="flex">
							<image :src="baseUrl + '/rdsImgs/me_icon_xgdlmm.png'" mode="scaleToFill"
								style="width: 48rpx;height: 48rpx;" class="margin-left-32"></image>
							<view class="margin-left-24 font-size-32">修改登录密码</view>
						</view>
						<view>
							<view class="iconfont icon-jiantouxiangyou font-size-32 color-888"
								style="font-weight: bold;"></view>
						</view>
					</view>
					<view class="tab-content-li flex justify-content-space-between margin-top-32"
						@click="FeedBackService">
						<view class="flex">
							<image :src="baseUrl + '/rdsImgs/me_icon_wtfk.png'" mode="scaleToFill"
								style="width: 48rpx;height: 48rpx;" class="margin-left-32"></image>
							<view class="margin-left-24 font-size-32">问题反馈</view>
						</view>
						<view>
							<view class="iconfont icon-jiantouxiangyou font-size-32 color-888"
								style="font-weight: bold;"></view>
						</view>
					</view>
					<view class="tab-content-li flex justify-content-space-between margin-top-32" @click="openAboutMe">
						<view class="flex">
							<image :src="baseUrl + '/rdsImgs/me_icon_gygyt.png'" mode="scaleToFill"
								style="width: 48rpx;height: 48rpx;" class="margin-left-32"></image>
							<view class="margin-left-24 font-size-32">关于管易通</view>
						</view>
						<view>
							<view class="iconfont icon-jiantouxiangyou font-size-32 color-888"
								style="font-weight: bold;"></view>
						</view>
					</view>
					<view class="margin-top-40 margin-bottom-40 padding-32" @click="OpenContact">
						<image :src="baseUrl + `/rdsImgs/me_address_book_${themeStore.theme}.png`" mode="widthFix"
							style="width: 100%;"></image>
					</view>
				</view>
			</scroll-view>
			<CustomTabBar current="我的" />
		</template>
	</eui-background>
</template>

<script setup type="ts">
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import { ref, getCurrentInstance } from 'vue'
	import service from '../../../common/service';
	import { useMainStore } from '../../../store/modules/store';
	import { useLoginStore } from '../../../store/modules/useLoginStore';
	import { useThemeStore } from '../../../store/themeStore';
	import CustomTabBar from '@/components/CustomTabBar.vue';
	import EuiBackground from '@enjoy/mobile/components/background/background.vue';
	import EuiTag from '@enjoy/mobile/components/tag/tag.vue'; 
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const themeBgColor = ref(themeStore.theme == 'theme-blue' ? 'linear-gradient(135deg, rgba(2, 183, 230, 1), rgba(54, 169, 243, 1))' : 'linear-gradient(135deg, #FF8359 0%, #FF6430 100%)')
	const themeColor = ref(themeStore.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')

	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 'px');
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref('300px');
	const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
	const personImg = ref(imgUrl + '/File/DownLoadImage/' + mainStore.loginInfo.sUser);
	const userInfo = ref({});

	const baseUrl= ref('');
	baseUrl.value = `${LoginStore.ImageBaseUrl}/xcxStatic/img`;
	const setErrorImg = () =>{
		personImg.value =userInfo.value.c_sex=='男'||userInfo.value.c_sex=='M'
		? `${baseUrl.value}/avatar_male.png`
		: `${baseUrl.value}/avatar_female.png'`
	}
	const GetMyInfoList =()=>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData: mainStore.loginInfo.sUser,//mainStore.loginInfo.sUser,
		        MethodName: "GetMyInfoList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
				if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData.length>0){
						userInfo.value = {
							...ObjectData[0],
							c_name:ObjectData[0].c_name?ObjectData[0].c_name:'未维护姓名',
							c_post:ObjectData[0].c_post?ObjectData[0].c_post:'未维护职位',
						};
					}else{
						userInfo.value = {
							c_name:'未维护姓名',
							c_post:'未维护职位',
						};
					}
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
				service.enjoyHideLoading();
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const openUserInfo = ()=>{
		uni.navigateTo({
		  url: '/packages/MainViews/user/userInfo',
		});
	}
	const openChangePassword = ()=>{
		uni.navigateTo({
		  url: '/packages/MainViews/user/changePassword',
		});
	}
	const FeedBackService = ()=>{
		uni.navigateTo({
			url: '/packages/OaViews/Email/WriteEmail?to=0000&tousername=管理员&title=问题反馈'
		});
	}
	const openSetting = ()=>{
		uni.navigateTo({
		  url: '/packages/MainViews/user/setting',
		});
	}
	const OpenContact = ()=>{
		uni.navigateTo({
		  url: '/packages/MainViews/user/contactBook',
		});
	}
	const openAboutMe = () => {
		uni.navigateTo({
		  url: '/packages/MainViews/aboutMe/aboutMe',
		});
	}
	const openWorkCard = () => {
		uni.navigateTo({
		  url: '/packages/MainViews/user/workcard',
		});
	}
	const openNews = () => {
		uni.navigateTo({
		  url: '/packages/OaViews/MessageCenter/index',
		});
	}
	onReady(()=>{
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".person-top");
				userInfoPage.boundingClientRect(function(data) {
					console.log("data: " + JSON.stringify(data));
					scrollHeight.value = (res.windowHeight - res.safeAreaInsets.bottom - data?.height - 59)+'px'
				}).exec()
			}
		});
	})
	onLoad(()=>{
		uni.hideTabBar();
		GetMyInfoList();
	})
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.padding-32 {
		padding: 0 32rpx;
	}

	.content {
		height: 88rpx;
		align-items: center;
		justify-content: space-between;
	}

	.iconfont {
		font-size: 20px;
		width: 40px;
		height: 100%;
		text-align: center;
		line-height: 37px;
		@include themeText("themeText");
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-32 {
		font-size: 32rpx;
	}

	.font-size-48 {
		font-size: 48rpx !important;
	}

	.color-fff {
		color: #fff !important;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
	}

	.margin-top-32 {
		margin-top: 32rpx;
	}

	.margin-top-12 {
		margin-top: 12rpx;
	}

	.margin-bottom-40 {
		margin-bottom: 40rpx;
	}

	.margin-top-40 {
		margin-top: 40rpx;
	}

	.margin-left-32 {
		margin-left: 32rpx;
	}

	.margin-left-24 {
		margin-left: 24rpx;
	}

	.margin-right-48 {
		margin-right: 48rpx;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.justify-content-center {
		justify-content: center !important;
	}

	.justify-content-space-between {
		justify-content: space-between !important;
	}

	.align-items-center {
		align-items: center !important;
	}


	.user-sex {
		position: absolute;
		bottom: 2rpx;
		right: 2rpx;
		width: 36rpx;
		height: 36rpx;

		border-radius: 50%;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #FFFFFF;
	}

	.user-sex-W {
		background-color: rgba(255, 132, 153, 1);
	}

	.user-sex-M {
		background-color: rgba(2, 183, 230, 1);
	}

	.tab-content {
		padding: 44rpx 48rpx;
	}

	.tab-content-li {
		width: 100%;
		height: 112rpx;
		align-items: center;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	::v-deep .u-tag__text--medium {
		font-size: 12px;
	}
	.tag-warp {
		::v-deep  .u-tag {
			height: 44rpx !important;
			border-color:  rgba(255,255,255,0.2) !important;
			box-sizing: border-box;
			padding-left: 24rpx !important;
			padding-right: 24rpx !important;
		}
	}
</style>
